# Vue 2 插件

import { SourceCode } from 'rspress/theme';

<SourceCode href="https://github.com/web-infra-dev/rsbuild/tree/main/packages/plugin-vue2" />

Vue 2 插件提供了对 Vue 2 SFC（单文件组件）的支持，插件内部集成了 [vue-loader](https://vue-loader.vuejs.org/) v15 版本。

:::tip
Vue 2 插件仅支持 Vue >= 2.7.0 版本。
:::

## 快速开始

### 安装插件

你可以通过如下的命令安装插件:

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @rsbuild/plugin-vue2 -D" />

### 注册插件

你可以在 `rsbuild.config.ts` 文件中注册插件：

```ts title="rsbuild.config.ts"
import { pluginVue2 } from '@rsbuild/plugin-vue2';

export default {
  plugins: [pluginVue2()],
};
```

注册插件后，你可以在代码中引入 `*.vue` 单文件组件。

## 选项

如果你需要自定义 Vue 的编译行为，可以使用以下配置项。

### vueLoaderOptions

传递给 `vue-loader` 的选项，请查阅 [vue-loader 文档](https://vue-loader.vuejs.org/) 来了解具体用法。

- **类型：** `VueLoaderOptions`
- **默认值：**

```js
const defaultOptions = {
  compilerOptions: {
    preserveWhitespace: false,
  },
  experimentalInlineMatchResource: true,
};
```

- **示例：**

```ts
pluginVue2({
  vueLoaderOptions: {
    hotReload: false,
  },
});
```

:::tip
Vue 2 插件使用的是 `vue-loader` v15 版本，请注意区分 v15 版本与最新版本之间可能存在配置差异。
:::

### splitChunks

在 [chunkSplit.strategy](/config/performance/chunk-split) 设置为 `split-by-experience` 时，Rsbuild 默认会自动将 `vue` 和 `router` 相关的包拆分为单独的 chunk:

- `lib-vue.js`：包含 vue，vue-loader。
- `lib-router.js`：包含 vue-router。

该选项用于控制这一行为，决定是否需要将 `vue` 和 `router` 相关的包拆分为单独的 chunk。

- **类型：**

```ts
type SplitVueChunkOptions = {
  vue?: boolean;
  router?: boolean;
};
```

- **默认值：**

```ts
const defaultOptions = {
  vue: true,
  router: true,
};
```

- **示例：**

```ts
pluginVue({
  splitChunks: {
    vue: false,
    router: false,
  },
});
```
